<template>
    <div class="mask">
        <div class="pop_up">
            <h2 class="f30">取消关注原因</h2>
            <div class="img">
                <img src="@/assets/my/qvguan@2x.png" alt="">
            </div>
            <div class="check">
                <div class="xuan on" v-for="(item, index) in cities" :key="index">
                    <input type="checkbox" v-model="checkedCities1" :value="item" @click="choose(item)">
                    {{item}}
                </div>
            </div>
            <div class="btns">
                <span @click="isShow(false, 0)">取消</span>
                <span @click="isShow(false, 1)">确定</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Bus from '@/bus/bus.js'
    export default {
        name: 'cancel',
        props: {
            abolish: Object
        },
        data() {
            return {
                cities: ['测算准度', '回复速度', '大师颜值'],
                checkedCities1: [],
                show: false
            }
        },
        methods: {
            isShow(bool, type) {
                this.show = bool;
                Bus.$emit('msg', {bools: bool, id: '', type: '2'})
                if(type) {
                    let params = {
                        "favoriteType": this.abolish.type,
                        "id": this.abolish.id,
                        "whycancel": this.checkedCities1.join(' '),
                        "userId": this.$store.state.userId
                    }
                    this.$http.fetchGet('cancelFavorite', params).then(res => {
                        if(res.code == 200){
                            this.$vux.toast.text('已取消关注')
                            this.$router.push({
                                path: '/my'
                            })
                        } else {
                            this.$vux.toast.text(res.msg)
                        }
                    }, err => {
                        console.log(err)
                    })
                }
            },
            choose(val) {
                let ind = this.checkedCities1.indexOf(val);
                if(ind == -1){
                    this.checkedCities1.push(val)
                } else {
                    this.checkedCities1.slice(ind, 1);
                }
            }
        },
        mounted() {
            
        }
    }
</script>

<style lang="less" scoped>
    .mask{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        .pop_up{
            background: #fff;
            border-radius: 3px;
            width: 60%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            .p(40);
            .pb(0);
            h2{
                text-align: center;
                color: #333;
            }
            .img{
                width: 100%;
                text-align: center;
                img{
                    .mt(40);
                    .mb(40);
                }
            }
            .btns{
                display: flex;
                border-top: 1px solid #f2f2f2;
                span{
                    flex: 1;
                    text-align: center;
                    .lh(88);
                    color: #189BEB;
                    &:nth-child(1){
                        border-right: 1px solid #f2f2f2;
                        color: #333;
                    }
                }
            }
        }
        .check{
            text-align: center;
            .xuan{
                display: inline-block;
                .ml(10);
                .mr(10);
                .mb(20);
                input[type="checkbox"]{
                    
                }
            }
        }
    }
</style>
